<template>
    <div class="dashboard-container dashboard-wrapper">

        <el-row :gutter="20">
            <el-col :span="8" class="wrapper">
                <el-row>
                    <el-col class="user-info">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-row class="avatar">
                                    <img :src="userAvatar"/>
                                </el-row>
                            </el-col>
                            <el-col :span="16">
                                <el-row class="margin-bottom-10">
                                    <el-col :span="6">姓名：</el-col>
                                    <el-col :span="18">
                                        <div style="margin-bottom: 5px">{{ user.realName }}</div>
                                    </el-col>
                                </el-row>
                                <el-row class="margin-bottom-10">
                                    <el-col :span="6">邮箱：</el-col>
                                    <el-col :span="18">
                                        <div style="margin-bottom: 5px">{{ user.email }}</div>
                                    </el-col>
                                </el-row>

                                <el-row class="margin-bottom-10">
                                    <el-col :span="6">所属公司：</el-col>
                                    <el-col :span="18">
                                        <template v-for="(item, index) in user.company">
                                            <el-tag type="primary" size="small">{{ item.name }}</el-tag>
                                        </template>
                                    </el-col>
                                </el-row>
                                <el-row class="margin-bottom-10">
                                    <el-col :span="6">所属部门：</el-col>
                                    <el-col :span="18">
                                        <template v-for="(item, index) in user.department">
                                            <el-tag type="primary" size="small">{{ item.name }}</el-tag>
                                        </template>
                                    </el-col>
                                </el-row>
                                <el-row class="margin-bottom-10">
                                    <el-col :span="6">所属组：</el-col>
                                    <el-col :span="18">
                                        <template v-for="item in user.groups">
                                            <el-tag type="primary" size="small">{{ item }}</el-tag>
                                        </template>
                                    </el-col>
                                </el-row>
                                <el-row class="margin-bottom-10">
                                    <el-col :span="6">角色：</el-col>
                                    <el-col :span="18">
                                        <template v-for="item in user.roles">
                                            <el-tag type="primary" size="small">{{ item }}</el-tag>
                                        </template>
                                    </el-col>
                                </el-row>


                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <div class="line-gray"></div>
                <el-row>
                    <el-col :span="24">
                        <el-row class="margin-top-8">
                            <el-col :span="8">上次登录时间:</el-col>
                            <el-col :span="16" class="padding-left-8"> {{ user.lastLoginTime }}</el-col>
                        </el-row>
                        <el-row class="margin-top-8 margin-bottom-10">
                            <el-col :span="8">上次登录地点:</el-col>
                            <el-col :span="16" class="padding-left-8">
                                <span class="margin-right-10">{{ user.lastLoginIp }}</span>
                                <span v-show="location.status === '1'">{{ location.province }} {{ location.city }}</span>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>

            <el-col :span="16">

                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-row class="wrapper-info">
                            <info-card
                                    idName="user_created_count"
                                    endVal="374"
                                    info-text="今日新增用户"
                                    iconType="el-icon-mars-personadd"
                                    color="#2d8cf0"
                            ></info-card>
                        </el-row>
                    </el-col>
                    <el-col :span="6">
                        <el-row class="wrapper-info">
                            <info-card
                                    idName="visit_count"
                                    endVal="7434"
                                    info-text="今日浏览量"
                                    iconType="el-icon-mars-activity"
                                    color="#64d572"
                            ></info-card>
                        </el-row>
                    </el-col>
                    <el-col :span="6">
                        <el-row class="wrapper-info">
                            <info-card
                                    idName="collection_count"
                                    endVal="2533"
                                    info-text="今日数据采集量"
                                    iconType="el-icon-mars-coupons"
                                    color="#ffd572"
                            ></info-card>
                        </el-row>
                    </el-col>
                    <el-col :span="6">
                        <el-row class="wrapper-info">
                            <info-card
                                    idName="transfer_count"
                                    endVal="6874"
                                    info-text="今日服务调用量"
                                    iconType="el-icon-mars-shenfenzheng"
                                    color="#f25e43"
                            ></info-card>
                        </el-row>
                    </el-col>
                </el-row>

                <el-row class="margin-top-8">
                    <el-col :span="24">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span style="line-height: 36px;">
                                    <i class="el-icon-mars-bell"></i>
                                    <b>今日服务调用地理分布</b>
                                </span>
                            </div>

                            <chart-car></chart-car>

                        </el-card>
                    </el-col>
                </el-row>

            </el-col>
        </el-row>


    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import InfoCard from './components/InfoShort.vue'
    import ChartCar from './components/Chart-Car.vue'
    import uAvatar from '../../../static/img/avatar/user2-160x160.jpg'

    export default {
        name: 'dashboard',
        data() {
            return {
                userAvatar: '',
            }
        },
        components: {
            InfoCard,
            ChartCar
        },
        computed: {
            ...mapGetters(['user', 'location'])
        },
        created() {
            //获取用户IP所在位置
            this.$store.dispatch('GetIpCity').then(() => {
            })

            if (this.user.avatar) {
                this.userAvatar = this.user.avatar
            } else {
                this.userAvatar = uAvatar
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .dashboard-wrapper {
        margin: 10px;
        padding: 0 10px;
        border-radius: 4px;
        font-size: 14px;
        position: relative;
        transition: all .2s ease-in-out;
        .wrapper {
            background: #fff;
            padding: 10px;
            &:hover {
                box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
                border-color: #eee;
            }
        }
        .wrapper-info {
            &:hover {
                box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
                border-color: #eee;
            }
        }

    }

    .user-info {
        .avatar{
            margin: 0 auto;
            height: 150px;
            width: 150px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

    }
</style>